/* ================  静态变量 ==============*/
@bgColor: #fff;

@borderColor: #ced3db;

@mainColor: #4d9dff;

@spacingSize: 20px;

@rightContainerSpaceingSize: 480px;

@subModuleWidth: 440px;

@selfColor: #f9a605;

@adminColor: #60b838;

@labelColor: #666;

@iconColor: #999;

@wrapBgColor: #f5f6f9;
/** end */

/* ================  公共部分 ==============*/
.width-full {
	width: 100%;
}

.position-r {
	position: relative;
}

.font-w-b {
	font-weight: bold;
}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}

.clearfix {
  zoom: 1;
}

.margin-t-normal {
	margin-top: @spacingSize;
}

.margin-b-normal {
	margin-bottom: @spacingSize;
}

.margin-r-normal {
	margin-right: @spacingSize;
}

.show-shadow (@color: @mainColor, @radius: 3px,) {
	-webkit-box-shadow:0 0 @radius @color;  
  	-moz-box-shadow:0 0 @radius @color;  
  	box-shadow:0 0 @radius @color;  
}

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

.required {
	color: red;
}

.display-n {
	display: none;
}

.display-n-p {
	/*display: none;*/
	position: absolute;
	top: -9999px;
}

.w204 {
	width: 204px;
}
.w300 {
	width: 300px;
}

.action-icon {
	a {
  		color: #666;
  		&:hover {
		  	color: @bgColor;
		  	background-color: @mainColor;
		}
	}
	i {
	  color: #677a8c;
	  font-size: 14px;
	  display: inline-block;
	  text-align: center;
	  line-height: 22px;
	  width: 24px;
	  height: 24px;
	  .rounded-corners(32px);
	  &:hover {
	  	color: @bgColor;
	  	background-color: @mainColor;
	  }
	  &.selected {
	  	color: @bgColor;
	  	background-color: @mainColor;
	  }
  	}
}

.action-search-container {
	float: right;
	select {
		margin-right: 5px;
	}
}
/** end */

/* ================  图标字体 ==============*/
.icon-view:before{ content: "\e641"; }
.icon-template:before{ content: "\e642"; }
.icon-sync:before{ content: "\e643"; }
.icon-proceed:before{ content: "\e645"; }
.icon-stop:before{ content: "\e647"; }
.icon-upload:before{ content: "\e63e"; }
.icon-refresh:before{ content: "\e630"; }
.icon-notice:before{ content: "\e61d"; }
.icon-user-stat:before{ content: "\e661"; }
/** end */

/* ================  账号管理 ==============*/
.acc-seletced {
	background-color: @mainColor;
	color: @bgColor;
}

.acc-right-container {
	position: absolute;
	top: 0px;
  	right: -@rightContainerSpaceingSize + 20px;
}

.acc-title {
	font-weight: bold;
	margin-bottom: 12px;
	&.selected {
		color: @mainColor;
	}
}
.acc-title-tip-icon {
	vertical-align: middle;
	display: inline-block;
	margin-left: 16px;
	width: 24px;
	.rounded-corners(16px);
	height: 16px;
	border: 1px solid @borderColor;
	.show-shadow(@borderColor);
	margin-right: 3px;
	&.admin {
		border-color: @adminColor;
		.show-shadow(@adminColor);
	}
	&.self {
		border-color: @selfColor;
		.show-shadow(@selfColor);
	}
}
.acc-title-tip-txt {
	font-weight: normal;
}

.acc-container {
	position: relative;
	background-color: @bgColor;
	margin-top: @spacingSize;
	padding: @spacingSize;
    overflow-y: auto;
	padding-right: @rightContainerSpaceingSize;
	.rounded-corners;
	&.expanded{
		padding-top: 90px;
		padding-bottom: 90px;
	}
}

.acc-tree-container {
	height: 752px;
	border: 1px dashed @borderColor;
    overflow-y: auto;
	.rounded-corners(8px);
	&.selected {
		border-color: @mainColor;
		background-color: #EDF0F5;
	}
}

.acc-info-container {
	padding: 0px 20px;
	width: @subModuleWidth;
	border: 1px solid @borderColor;
	.rounded-corners(8px);
	font-size: 12px;
	&.selected {
		border-color: @mainColor;
	}
}

.acc-info-input-container {
	border-bottom: 1px solid @borderColor;
	height: 40px;
	line-height: 40px;
	&.last {
		border: none;
		position: relative;
	}
}

.acc-info-input-container.last {
	border: none;
	position: relative;
}

.acc-info-label {
	margin-left: 30px;
	line-height: 32px;
	width: 120px;
	float:left;
	i {
		color: @labelColor;
		font-size: 16px;
 		margin-right: 10px;
	}
}

.acc-info-input {
	width: 205px;
	height: 32px;
	line-height: 32px;
	border: 1px solid #ddd;
	padding: 0px 10px;
	.rounded-corners(3px);
	&:focus {
		border-color: @mainColor;
		.show-shadow;
	}
}

input.acc-info-checkbox {
	width: 16px;
	height: 16px;
	margin-top: -2px;
	vertical-align: middle;
	&:focus {
		border-color: @mainColor;
		.show-shadow;
	}
}

.acc-info-icon {
	vertical-align: middle;
	display: inlne-block;
	margin-top: -2px;
	color: @labelColor;
	font-size: 15px;
	cursor: pointer;
	&:hover {
		color: @mainColor;
	}
}

.acc-module-title {
	font-weight: bold;
    border-bottom: 1px solid @borderColor;
}

.acc-module-tree-title {
	width: 150px;
	float: left;
	line-height: 50px;
}

.acc-module-tree-container {
	width: 402px;
	float: left;
	height: 290px;
	overflow-y: scroll;
	padding: 0px 20px;
	.ztree li {
		line-height: 28px;
		a {
			line-height: 28px;
		}
	}
}

.acc-module-tree-rw-container {
	display: inline-block;
  	width: 100px;
  	position: absolute;
  	top: 6px;
  	left: 190px;
  	input[type=checkbox] {
		width: 16px;
		height: 16px;
	}
}

.level1 .acc-module-tree-rw-container {
	left: 172px;
}

.level2 .acc-module-tree-rw-container {
	left: 154px;
}

.acc-module-rw-title {
  	margin-left: 28px;
	>div {
		line-height: 40px;
  		font-weight: normal;
	}
}

.acc-module-template-title {
	width: 160px;
	text-align: right;
	float: left;
	line-height: 50px;
	color: @mainColor;
	cursor:pointer;
}

.acc-module-container {
	padding: 0px 20px;
	width: @subModuleWidth;
	height: 348px;
	margin-bottom: 20px;
	border: 1px solid @borderColor;
	.rounded-corners(3px);
	&.selected {
		border-color: @mainColor;
	}
}

.acc-action {
	font-weight: normal;
  	margin-right: 10px;
	cursor: pointer;
	color: @labelColor;
	&:hover {
	  	color: @mainColor;
	}
	i {
		margin-right: 3px;
		&.right {
			margin-left: -6px;
		}
	}
}


/* ztree 相关样式 */
.ztree .acc-tree-user-container {
	display: inline-block;
	margin-left: 12px;
	padding: 6px;
	min-width: 500px;
}

/* ztree 相关样式 */

.ztree li .acc-tree-user-container span {
	display: inline-block;
	margin-right: 10px;
	height: 32px;
	line-height: 28px;
	min-width: 70px;
	padding: 0px 12px;
	text-align: center;
	border: 1px solid @borderColor;
	float: left;
	margin-top: 5px;
	.rounded-corners(32px);
	&.admin {
		border-color: @adminColor;
		.show-shadow(@adminColor);
		&:hover {
			border-color: @adminColor;
			background-color: @adminColor;
		}
		&.selected {
			border-color: @adminColor;
			background-color: @adminColor;
		}
		&.self {
			border-color: @selfColor;
			.show-shadow(@selfColor);
			&:hover {
				border-color: @selfColor;
				background-color: @selfColor;
			}
			&.selected {
				border-color: @selfColor;
				background-color: @selfColor;
			}
		}
	}
	&.add {
		float:none;
		min-width: 34px;
		color: @labelColor;
		padding: 0px;
	}
	&.selected {
		background-color: @mainColor;
		color: @bgColor;
	}
	&:hover {
		border-color: @mainColor;
		color: @bgColor;
		background-color: @mainColor;
	}
}

.ztree li div.acc-tree-user-container span {
	&.selected {
		.acc-seletced;
	}
}

.acc-action-btn-container {
 	height: 55px;
  	background-color: white;
  	line-height: 55px;
  	margin-top: 20px;
	padding: 0px @spacingSize;
	text-align: right;
}

.acc-module-template-btn {
	line-height: 32px;
 	padding: 0px 10px;
  	background: @bgColor;
  	border: 1px solid @labelColor;
  	color: @labelColor;
  	font-weight: normal;
  	&:hover {
  		border-color: @mainColor;
  		color:  @mainColor;
  	}
  	&.selected {
  		border-color: @mainColor;
  		color:  @mainColor;
  	}
}


.acc-tree-container .ztree li span.button.switch {
	margin-top:12px;
}


.group-select {
	.group-content {
		height: 420px;
		overflow-y: scroll;
		border: 1px solid @borderColor;
	}
	.ztree li {
		line-height: 24px;
		a.curSelectedNode {
			padding-top: 0px;
			color: @mainColor;
			border: 1px solid @mainColor;
		}
	}
}
/** end */

.tenant-container {
	margin-top: 20px;
	padding: 20px;
	background: #fff;
}

.tenant-config-container {
	padding: 8px;
}

.tenant-config-sub-l-container {
	float: left;
	padding: 0px 90px 0px 30px;
}

.tenant-config-sub-r-container {
	float: left;
}


.tenant-info-input-container {
	height: 40px;
	line-height: 40px;
}

.tenant-info-label {
	color: @labelColor;
	line-height: 32px;
	width: 110px;
	i {
		color: #666666;
		font-size: 16px;
		margin-right: 10px;
	}
}


/** ===============  国际化 ================= */

.language-grid-content {
  	height: 40px;
 	line-height: 40px;
}

.language-action-btn-container {
	height: 55px;
  	background-color: @bgColor;
  	line-height: 55px;
  	margin-bottom: 18px;
  	padding: 0px 20px;
  	text-align: right;
}

.language-pack-desc {
	color: @iconColor;
 	width: 190px;
  	overflow: hidden;
  	text-overflow: ellipsis;
  	white-space: nowrap;
  	display: inline-block;
  	position: absolute;
  	margin-left: 20px;
}

.tree-name>span {
	position: relative;
}
/** end */

/** ===============  设备升级 ================= */
.upgrade-firmware-dialog {
	.modal-dialog {width: 760px;}
} 

.ui-jqgrid .ui-jqgrid-view input.firm-radio {
  vertical-align: middle;
  margin-top: -2px;
  font-size: 12px;
}
/** end */

/** ===============  升级日志详情 ================= */
.log-detail-dialog {
	.modal-dialog {width: 960px;}
} 

.job-log-grid-container .ui-jqgrid .ui-jqgrid-btable tbody tr.jqgrow td {
	white-space: normal;
}
/** end */

/** ===============  固件管理 ================= */
.firmware-uploader-dialog .modal-dialog {
	width: 494px;
	.modal-footer {padding-top: 0px;}
}
.firmware-upload-tip {
	color: @iconColor;
	display: inline-block;
	margin-bottom: 14px;
}
.firmware-upload-container {
	height: 216px;
	border: 1px dashed @borderColor;
	background: @wrapBgColor;
	.webuploader-pick {
		background: @mainColor;
		height: 42px;
		left: 50%;
		margin-left: -84px;
		&:hover {
			color: #fff;
			background: #0072cc;
		}
		&.webuploader-pick-hover {
			background: #0072cc;
		}
	}
	.group-content {
		padding-top: 18px;
		dl {
			margin-bottom: 10px;
			dt {
				font-weight: bold;
			}
		}
	}
	.rui-input.area {
		height: 60px;
		width: 180px;
	}
}

.firmware-upload-error {
	float: left;
  	color: red;
}

.firmware-upload-container {
	.progress {
		display: none;
		margin: 20px;
  		margin-top: 80px;
	}
	&.ready {
		.firmware-upload-icon-container, .btns {
			display: none;
		}
		.group-content {
			display: block;
		}
	}
	&.uploading {
		.firmware-upload-icon-container, .btns {
			display: none;
		}
		.group-content {
			display: none;
		}
		.progress {
			display: block;
		}
	}
}

.firmware-upload-icon-container {
	width: 66px;
  	height: 66px;
  	margin: 40px auto 0px;
  	margin-bottom: 25px;
	i {
		font-size: 64px;
  		color: #d3d3d3;
	}
}
/** end */

/** ===============  对已有样式的覆盖 ================= */
div.rui-tab-container {background: @bgColor;}

.group-content .ipt-txt.rui-validator-input-fail, .group-content .ipt-select.rui-validator-input-fail {
	border: 1px solid #f30;
}
.group-content .ipt-txt:focus, .group-content .ipt-select:focus {
	border-color: @mainColor;
  	-webkit-box-shadow: 0px 1px 5px rgba(0, 142, 255, 0.5);
  	-moz-box-shadow: 0px 1px 5px rgba(0, 142, 255, 0.5);
  	-ms-box-shadow: 0px 1px 5px rgba(0, 142, 255, 0.5);
  	-o-box-shadow: 0px 1px 5px rgba(0, 142, 255, 0.5);
  	box-shadow: 0px 1px 5px rgba(0, 142, 255, 0.5);
}

.ipt-txt {
	&.area {
		height: 80px;
		line-height: 24px;
		resize:none;
	}
}

.table-panel .table-action {
	.icon.selected {
		color: @mainColor;
	}
}

.table .icon{
	&.icon-ok:hover,&.icon-canel:hover,&.icon-user-stat:hover,&.icon-question:hover {
		background: #D8ECFF;
	}
	&.acc-info-icon {
		margin-top: 0px;
		&:hover {
			background: #D8ECFF;
			color: @mainColor;
		}
	}
	&.icon-ok {
		color: #60B838;
	}
	&.icon-question {
		color: #F9A005;
	}
	&.icon-canel {
		color: #999;
	}
	&.icon-user-stat {
		color: #999;
		&.admin {
			color: @adminColor;
		}
		&.self {
			color: @selfColor;
		}
	}
}

.radio-ipt input[type=radio] {
	vertical-align: middle;
	margin-top: -2px;
	margin-right: 5px;
}

.modal.group-dialog {
	z-index: 9999;
}

.table-panel.small {
  background: #fff;
  padding: 20px;
}
/* RUI Tab控件中嵌入表格控件 */
.rui-tab-container-item .ui-jqgrid .ui-jqgrid-btable tbody tr.jqgrow td {
	font-size: 14px;
}

div.rui-tab-nav li.rui-selected {
	border-color: @mainColor;
	a {
		color: @mainColor;
	}
}

table.rui-calendar-condensed {
	border-collapse: inherit;
	td {
		vertical-align: middle;
	}
}

div.rui-validator-tip {
	// z-index: 9998;
}

/** end */